import { Layout } from 'antd'
import config from '@/config'
import { ReactComponent as MenufoldIcon } from '@/desktop/assets/menu-fold.svg'
import { ReactComponent as MenuUnfoldIcon } from '@/desktop/assets/menu-unfold.svg'
import { Actionable, HideInServiceMode } from '@/desktop/components'
import { useHandleLostConnection } from '@/desktop/logics/handle-lost-connection'
import { useLeaveConfirm } from '@/desktop/logics/leave-confirm'
import { useSCRMSyncMask } from '@/desktop/logics/scrm-sync-mask'
import { ellipsis } from '@/desktop/styles'
import { AppCenter } from '@/desktop/views/app-center/index'
import Chat from '@/desktop/views/chat'
import { Contacts } from '@/desktop/views/contacts'
import { Qywxs } from '@/desktop/views/qywxs'
import { SCRMNav } from '@/desktop/views/scrm-nav'
import { SettingsToggle } from '@/desktop/views/settings'
import { useStreams } from '@/lib/utils'
import useUIMemory from '@/logics/memory'
import services from '@/services'

import { panelSubject } from './cover-panel'
import { Account } from './info/account'
import { Observing } from './info/observing'
import { SocketStatus } from './info/status'
import { Versions } from './info/versions'
import { siderSizes, SiderItem } from './sider-item'

export function AppLayout() {
  useLeaveConfirm()
  useHandleLostConnection()
  useSCRMSyncMask()

  return <Layout css={styles.layout}>
    {!services.scrm.inSCRM && !config.NO_HEADER ? (
      <Layout.Header css={styles.header}>
        <main>
          {config.PRODUCT_LOGO ? <img className="logo" src={config.PRODUCT_LOGO} /> : null}
          <h1>{config.PRODUCT_NAME}</h1>
          <HideInServiceMode>
            <Versions />
          </HideInServiceMode>
        </main>
        <SocketStatus />
        <Observing />
        <Actionable strict>
          <Account />
        </Actionable>
      </Layout.Header>
    ) : null}

    <AppMain />
  </Layout>
}

function AppMain() {
  const [connected] = useStreams(services.mqtt.connected)
  const [siderCollapsed, setCollapsed] = useUIMemory('sider-collapsed', true)
  const [CoverPanelComponent] = useStreams(panelSubject)

  const content = !connected ? (
    <Layout.Content className="waiting">请等待网络连接成功</Layout.Content>
  ) : (
    <>
      <HideInServiceMode>
        <Layout.Sider
          collapsible
          collapsed={siderCollapsed}
          onCollapse={setCollapsed}
          width="220px"
          collapsedWidth="72px"
          trigger={
            <SiderItem
              collapsed={siderCollapsed}
              icon={siderCollapsed ? <MenuUnfoldIcon /> : <MenufoldIcon />}
              title="收起"
              tooltip="展开"
              hover={false}
            />
          }
        >
          <Qywxs collapsed={siderCollapsed} />

          <Actionable>
            <AppCenter collapsed={siderCollapsed} />
            {/*<SCRMNav collapsed={siderCollapsed} />*/}
            <SettingsToggle collapsed={siderCollapsed} />
          </Actionable>
        </Layout.Sider>
      </HideInServiceMode>

      <Layout.Content className="content">
        <Contacts />
        <Chat />
        {CoverPanelComponent ? <CoverPanelComponent /> : null}
      </Layout.Content>
    </>
  )

  return <Layout css={styles.main}>{content}</Layout>
}

const triggerBottomExtra = 20
const siderItemHeight = siderSizes.iconContent + siderSizes.itemPadding * 2
const triggerHeight = siderItemHeight + triggerBottomExtra

const styles = {
  layout: css`
    height: 100%;
  `,

  header: css`
    box-shadow: 0px 3px 6px 0px rgba(50, 64, 77, 0.05);
    display: flex;
    padding: 0 24px;
    z-index: 1;

    & > main {
      align-items: center;
      display: flex;
      flex: 1;
      & > * {
        ${ellipsis};
      }
    }
    .logo {
      height: 40px;
      margin-right: 15px;
      width: 40px;
    }
    h1 {
      color: #48494f;
      display: inline-block;
      font-size: 22px;
      font-weight: 400;
      margin: 0 10px 0 0;
    }
  `,

  main: css`
    height: 100%;
    overflow: hidden;
    z-index: 0;

    & > .waiting {
      color: #555;
      font-size: 20px;
      letter-spacing: 1px;
      padding-top: 35vh;
      text-align: center;
    }

    & > .content {
      display: flex;
      position: relative;
    }
    .ant-layout-sider {
      background-color: #ebeef2;
      padding-bottom: ${triggerHeight}px;
      padding-top: 24px;
      &.ant-layout-sider-collapsed {
        padding-top: 30px;
      }
    }
    .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
    }
    .ant-layout-sider-trigger {
      background-color: #ebeef2;
      color: #000;
      height: ${triggerHeight}px;
      line-height: 1;
      text-align: left;
      &:hover {
        opacity: 0.6;
      }
    }
  `,
}
